<template>
  <div class="warp">
    <div class="flex align-center just-center mt20">
      <ul class="mr20">
        <li class="f28" style="background: wheat">
          111111111111++++++++++++++++++
        </li>
        <li class="f28" style="background: #ddb3f5">222222222222</li>
      </ul>
      <el-button type="primary">{{ vuexText }}</el-button>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, computed } from "vue";
import axios from "@/utils/axios";
import { useStore } from "vuex";
export default {
  name: "Index",
  setup() {
    const store = useStore();
    const state = reactive({
      vuexText: computed(() => store.state.vuexText), //vuex调用
    });

    onMounted(async () => {
      const res = await axios.get("/api/index"); //axios模拟请求
      store.commit("setVuexText", res.data.name); //修改vuex
    });

    return {
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.warp {
  a {
    color: red;
  }
}
</style>